﻿<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            BODY { font-family:Arial; font-size:12px }
        </style>
        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
        <script type="text/javascript">

            var map;
            var myDragHandleModule;

            function myModuleLoaded() {
                myDragHandleModule = new dragHandleModule(map);
                document.getElementById('loadedMessage').innerHTML = 'Drag Handle Module Loaded (version ' + myDragHandleModule.version() + ')';
            }

            function load() {
                //Create Map
                var center = new Microsoft.Maps.Location(41.8756, -87.9956);
                var points = new Array();

                map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
                    credentials: 'YOUR_BING_MAPS_KEY',
                    center: center,
                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                    zoom: 9
                });

                //Create polyline with random points
                var view = map.getBounds();
                var topLeft = view.getNorthwest();
                var bottomRight = view.getSoutheast();
                var latSpan = bottomRight.latitude - topLeft.latitude;
                var longSpan = bottomRight.longitude - topLeft.longitude;

                for (i = 1; i <= 3; i++) {
                    var pointLatLong = new Microsoft.Maps.Location(topLeft.latitude + latSpan * Math.random(), topLeft.longitude + longSpan * Math.random());
                    points.push(pointLatLong);
                }

                //Create Polyline
                var polylineStrokeColor = new Microsoft.Maps.Color(200, 0, 0, 200);
                polyline = new Microsoft.Maps.Polyline(points, { strokeColor: polylineStrokeColor, strokeThickness: 2 });
                Microsoft.Maps.Events.addHandler(polyline, 'click', editShape);

                map.entities.push(polyline);

                //Create Polygon
                var polygonPoints = [
                new Microsoft.Maps.Location(center.latitude, center.longitude - 0.15),
                new Microsoft.Maps.Location(center.latitude + 0.1, center.longitude - 0.05),
                new Microsoft.Maps.Location(center.latitude + 0.1, center.longitude + 0.05),
                new Microsoft.Maps.Location(center.latitude, center.longitude + 0.15),
                new Microsoft.Maps.Location(center.latitude - 0.1, center.longitude + 0.05),
                new Microsoft.Maps.Location(center.latitude - 0.1, center.longitude - 0.05),
                new Microsoft.Maps.Location(center.latitude, center.longitude - 0.15)];

                //Add Polygon
                var polygonStrokeColor = new Microsoft.Maps.Color(100, 0, 0, 200);
                var polygonFillColor = new Microsoft.Maps.Color(100, 0, 100, 0);
                var MyPolygon = new Microsoft.Maps.Polygon(polygonPoints, { fillColor: polygonFillColor, strokeColor: polygonStrokeColor, strokeThickness: 2 });
                Microsoft.Maps.Events.addHandler(MyPolygon, 'click', editShape);
                map.entities.push(MyPolygon);

                // Register and load a new module
                Microsoft.Maps.registerModule("DragHandles", "scripts/DragHandleModule.js");
                Microsoft.Maps.loadModule("DragHandles", { callback: myModuleLoaded });
            }

            function editShape(e) {
                try {
                    myDragHandleModule.edit(e.target);
                    document.getElementById('cmdEdit').style.visibility = 'visible';
                }
                catch (err) {
                    alert(err.message);
                }
            }

            function toggleEdit() {
                myDragHandleModule.dispose();
                document.getElementById('cmdEdit').style.visibility = 'hidden';
            }

        </script>
    </head>
    <body onload="load();">
        <h3>Bing Maps AJAX Control v7 Dynamic Module - Drag Handle Module</h3>
        <div style="position:relative; width:600px;">
            Click on either shape to enter "edit" mode and the drag handles will de displayed.  Click any of the drag handles to resize the selected shape.  Once done, click the button below the map to exit "edit" mode.<br />
            <br />
            Edit mode applies to one shape at a time.  Selecting shapes can be tricky at times.<br />
            <br />
            <span id="loadedMessage"></span><br />
            <br />
        </div>
        <div id='mapDiv' style="position:relative; width:600px; height:400px;"></div>
        <input type="button" id="cmdEdit" value="Click to end edit" onclick="toggleEdit();" style="visibility:hidden; width:600px;" />
    </body>
</html>
